<template>
  <div class="aspiration-container">
    <div>{{ num }}</div>
    <div v-for="(item,index) in arr" :key="index">{{ item }}</div>
    <!--     底部 消息编辑区域 -->
    <div class="foot">
      <input type="text" class="cont" v-model="cont">
      <button @click="send">提交</button>
    </div>
  </div>

</template>

<script>
export default {
  name: 'aspirationIndex',
  data () {
    return {
      cont: '',
      arr: [],
      num: 0
    }
  },
  created () {
    console.log(this.num)
  },
  /* socket是监听服务器发布的自定义事件 */
  sockets: {
    /* 监听welcome事件 */
    welcome: function (data) {
      console.log('welcome data 数据返回 = >', data)
      this.arr.push(data)
    },
    hello: function (data) {
      console.log(data)
      this.num = data[1]
    }
  },
  methods: {
    send () {
      if (this.cont.length > 0) {
        // this.cont.push(this.cont)
        this.$socket.emit('message', this.cont)
        this.join({
          name: '小李',
          id: '2'
        })
      }
    },
    join (name) {
      this.$socket.emit('join', name)
    }
  }
}
</script>

<style scoped>

</style>
